/* ======1=========2=========3=========4=========5=========6=========7======= */
/* 20150516-Recipes-Display-media-queries.css                                 */
/* Recipes v1.0.0
/*----------------------------------------------------------------------------*/

/* SEE: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/ */
/* SEE: http://cssmediaqueries.com/; */
/* Why you don’t need device specific breakpoints */
/*    20141028 https://responsivedesign.is/articles/why-you-dont-need-device-specific-breakpoints/ */

/* CSS-Tricks site: */
/*@media (max-width: 1350px) {}
@media (max-width: 1200px) {}
@media (max-width: 1024px) {}
@media (max-width: 860px) {}*/

/*  Another possibility */
/*@media (min-width:500px){}}
@media (max-width:499px){}}*/

/* https://medium.freecodecamp.com/the-100-correct-way-to-do-css-breakpoints-88d6a5ba1862#.t1pxwmn7i */
/*----------------------------------------------------------------------------*/
/* for-phone-only */
@media (max-width: 425) {
	#popup_toc_group {
		overflow: scroll;
	}
	.jcf_recipe_card {
		width: calc(100vw - 120px);
	}
}
/*----------------------------------------------------------------------------*/
/* for-phone-only */
@media (max-width: 599px) {
	#popup_toc_group {
		overflow: scroll;
	}
	.jcf_recipe_card.control-top-left,
	.jcf_recipe_card.control-bottom-left,
	.jcf_recipe_card.control-top-right,
	.jcf_recipe_card.control-bottom-right {
		width: calc(100vw - 60px);
	}
	.jcf_Recipe_ingredients_title {
		letter-spacing: .3em;
	}
	.jcf_Recipe_directions_title {
		letter-spacing: .25em;
	}
	#page-mode-titlebar {
		top: initial;
	}
	.container2.control-top-left,
	.container2.control-bottom-left  {
		padding:2px;
		margin: 1em .18em 2em 2em;
	}
	.container2.control-top-right,
	.container2.control-bottom-right  {
		margin: 1em 2em 2em .18em;
		padding:2px;
	}
}
/*----------------------------------------------------------------------------*/
/* for-tablet-portrait-up */
@media (min-width: 600px) {
	#popup_toc_group {
		overflow: scroll;
	}
	.jcf_recipe_card {
		width: calc(100vw - 441px);
	}
}
/*----------------------------------------------------------------------------*/
/* for-tablet-landscape-up */
@media (min-width: 900px) {
	#popup_toc_group {
		overflow: initial;
	}
	.jcf_recipe_card {
		width: calc(100vw - 569px);
	}
}
/*----------------------------------------------------------------------------*/
/* for-desktop-up */
@media (min-width: 1200px) {
	#popup_toc_group {
		overflow: initial;
	}
	.jcf_recipe_card {
		width: calc(100vw - 1048px);
	}
}
/*----------------------------------------------------------------------------*/
/* for-big-desktop-up */
@media (min-width: 1800px) {
	#popup_toc_group {
		overflow: initial;
	}
	.jcf_recipe_card {
		width: calc(100vw - 1480px);
	}
}

/*usage
.my-box {
  padding: 10px;
  @include for-desktop-up {
    padding: 20px;
  }
}*/